<template>
  <div>
    <!-- 美食天下 -->
    <van-nav-bar fixed title="美食天下">
      <template slot="right">
        <van-icon name="filter-o" size="18" color="black" />
      </template>
      <!-- 单标签变成双标签 -->
    </van-nav-bar>

    <div class="big">
      <div v-for="(item, index) in cai" :key="index" class="little">
        {{ item.name }}<img v-lazy="item.img" />
      </div>
      <div v-for="(item, index) in cai" :key="index" class="little">
        {{ item.name }}<img v-lazy="item.img" />
      </div>
    </div>

    <!-- 底部标签栏 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      active:"dinner",
      cai: [
        {
          name: "回锅肉",
          img: "https://seopic.699pic.com/photo/50021/5629.jpg_wh1200.jpg",
        },
        {
          name: "红烧肉",
          img: "https://seopic.699pic.com/photo/50124/3243.jpg_wh1200.jpg",
        },
        {
          name: "土豆丝",
          img: "https://seopic.699pic.com/photo/50093/3038.jpg_wh1200.jpg",
        },
        {
          name: "番茄炒蛋",
          img: "https://seopic.699pic.com/photo/50121/4430.jpg_wh1200.jpg",
        },
        {
          name: "梅菜扣肉",
          img: "https://seopic.699pic.com/photo/50080/9812.jpg_wh1200.jpg",
        },
        {
          name: "韭菜煎蛋",
          img: "https://seopic.699pic.com/photo/30682/6759.jpg_wh1200.jpg",
        },
        {
          name: "水煮肉片",
          img: "https://seopic.699pic.com/photo/50171/9683.jpg_wh1200.jpg",
        },
        {
          name: "炝炒白菜",
          img: "https://seopic.699pic.com/photo/50119/1384.jpg_wh1200.jpg",
        },
      ],
    };
  },
  watch: {
    active(newValue, oldValue) {
      if ((newValue = "home")) {
        this.$router.push("/");
      };
            if ((newValue = "market")) {
        this.$router.push("/market");
      };
    },
  },
};
</script>

<style>
.big {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding-bottom: 50px;

}
.little {
  width: 180px;
  text-align: center;
}
img {
  width: 100%;
}
</style>
